<template>
	<view class="page">
		<view class="container ">
			<view class="title">
				通行证
			</view>

			<view class="main content">
				<view class="positionInfo">
					<view class="position1 ">
						安师大停车场
					</view>
					<view class="position2 layout">
						安徽省芜湖市弋江区安徽师范大学花津校区
					</view>
					<view class="money layout">
						5元/1h
					</view>
				</view>
				<!-- 倒计时 -->
				<view class="info">
					<view class="stallInfo">
						<view class="count layout">
							<view>进场倒计时</view>
							<view class="time">
								<u-count-down :timestamp="timestamp" color="#0081ff" font-size="60" @end="end">
								</u-count-down>
							</view>
						</view>
						<view class="stall layout">
							<view>车位号</view>
							<view class="stallNum">
								{{park_num}}
							</view>
						</view>
					</view>
					<u-gap height="3" bg-color="#bbb" style="margin: 0 10%;"></u-gap>
					<view class="code" v-if="vue_punctuality">
						<image src="../../static/image/QRcode.png" mode=""></image>
						<view class="tips">
							<view>扫码停车</view>
						</view>
					</view>
					<!-- 时间过期 -->
					<view class="content code" v-if="!vue_punctuality">
						<image src="../../static/image/guoqi.png" mode=""></image>
					</view>
				</view>
			</view>
			<view class="icon">
				<image src="../../static/image/index/location3.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 倒计时
				timestamp: 60 * 60 * 2,
				park_num: '',
				// start: '',
				now: '',
				// 预约时间
				booking_time: ''
			}
		},
		methods: {
			timeFn() {
				this.now = new Date()
				// if (!this.booking_time) {
				// 	if (this.vuex_time) {
				// 		this.$u.vuex('vuex_start', new Date)
				// 		this.$u.vuex('vuex_time', false)
				// 	}
				// 	this.timestamp = 60 * 60 * 2 - (this.now.getTime() - this.vuex_start.getTime()) / 1000
				// } else {
				this.timestamp = 60 * 60 * 2 - (this.now.getTime() - this.booking_time) / 1000
				// }
				// console.log(this.vuex_start, this.now)
				// console.log(this.now.getTime(), this.vuex_start.getTime())
				// console.log(this.$refs.uCountDown.seconds)
			},
			end() {
				this.$u.vuex('vue_punctuality', false)
			}
		},
		onLoad(option) {
			this.park_num = option.park_num
			this.booking_time = option.booking_time;
			// console.log(1, this.booking_time)
			this.timeFn()
		},
		onBackPress() {

		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #0081FF;
		width: 100%;
		height: 1480rpx;
	}

	.container {
		display: flex;
		flex-flow: column;
		justify-content: center;
		margin: 0 5%;

		.title {
			height: 150rpx;
			font-family: "palatino linotype", palatino, serif;
			color: #FFFFFF;
			font-size: 80rpx;
			font-weight: bold;
			line-height: 100rpx;
		}

		.main {
			display: flex;
			flex-direction: column;
			height: 1000rpx;
			background-color: #FFFFFF;
			border-radius: 40rpx;

			.positionInfo {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: flex-start;
				background-color: $page-color;
				border-radius: 40rpx 40rpx 0 0;
				padding-left: 60rpx;

				.position1 {
					font-family: "palatino linotype", palatino, serif;
					font-size: 50rpx;
					font-weight: bold;
					letter-spacing: -0.2pt;
					word-spacing: -9pt;
					// line-height: 0.6;
				}

				.position2 {
					font-size: 30rpx;
				}

				.layout {
					padding-top: 10rpx;
					color: #999999;
				}

			}

			.info {
				flex: 4;
				display: flex;
				flex-flow: column;

				// align-items: center;
				.stallInfo {
					flex: 1;
					display: flex;
					justify-content: space-around;
					align-items: center;

					.time,
					.stallNum {
						color: $base-color;
						font-size: 60rpx;
					}

					.layout {
						display: flex;
						flex-flow: column;
						justify-content: space-around;
					}
				}


				.code {
					flex: 2;
					margin: 0 auto;
					padding-top: 30rpx;

					image {
						width: 500rpx;
						height: 500rpx;
					}

					.tips {
						display: flex;
						justify-content: center;
					}
				}
			}
		}

		.icon {
			margin: 0 auto;
			display: float;
			margin-top: -70rpx;

			image {
				height: 150rpx;
				width: 150rpx;
			}
		}
	}
</style>
